<template>
  <!--侧边栏-->
  <el-container>
    <!--侧边菜单-->
    <el-aside :width="asideWidth" style="height: 100%;background-color: #001529;position: fixed">
      <div style="height: 60px;color: white;display: flex;align-items: center;justify-content: center">
        <img src="@/assets/favicon.ico" style="width: 40px;height: 40px" alt="">
        <span class="logo-title" v-show="!isCollapse">VueAdmin</span>
      </div>
      <!--$route.path当前浏览器访问的路由-->
      <el-menu :collapse="isCollapse"
               :collapse-transition="false"
               router style="border: none"
               text-color="rgba(255,255,255,0.65)"
               active-text-color="#fff"
               background-color="#001529"
               :default-active="$route.path">
        <el-menu-item index="/home">
          <el-icon>
            <House/>
          </el-icon>
          <template #title>系统首页</template>
        </el-menu-item>
        <el-menu-item index="/chart">
          <el-icon>
            <PieChart/>
          </el-icon>
          <template #title>数据报表</template>
        </el-menu-item>
        <el-menu-item index="/11">
          <el-icon>
            <Odometer/>
          </el-icon>
          <template #title>系统监控</template>
        </el-menu-item>
        <el-sub-menu index="/manage">
          <template #title>
            <el-icon>
              <User/>
            </el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user">
            <template #title>用户管理</template>
          </el-menu-item>
          <el-menu-item index="/1">
            <template #title>角色管理</template>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!--头部-->
    <el-container :style="{ marginLeft: asideWidth }">
      <el-header style="height: 60px;line-height: 60px">
        <el-icon @click="handleCollapse" v-if="isCollapse" style="font-size: 20px">
          <Expand/>
        </el-icon>
        <el-icon @click="handleCollapse" v-if="!isCollapse" style="font-size: 20px">
          <Fold/>
        </el-icon>
        <el-breadcrumb :separator-icon="ArrowRightBold" style="margin-left: 20px;font-weight: bold">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>系统首页</el-breadcrumb-item>
        </el-breadcrumb>


        <div style="flex: 1;width: 0;display: flex;align-items: center;justify-content: flex-end">
          <el-dropdown>
            <span class="el-dropdown-link" style="display:flex;align-items: center">
              <el-avatar :src="defaultAvatar"/>
              <el-icon class="el-icon--right" style="align-items: center"><arrow-down/></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!--主体区域-->
      <el-main>
        <router-view/>
      </el-main>

    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {
  ArrowDown, ArrowRightBold,
  Expand,
  Fold,
  House,
  Odometer,
  PieChart,
  User,
} from "@element-plus/icons-vue";

const isCollapse = ref(false)//默认不收缩
const asideWidth = ref('200px')
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

function handleCollapse() {
  isCollapse.value = !isCollapse.value
  asideWidth.value = isCollapse.value ? '64px' : '200px'
}
</script>

<style scoped>
/*选项卡被选中时蓝色效果*/
/deep/ .el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px !important;
  width: calc(100% - 8px) !important;
  margin-left: 4px !important;
}

/*选项卡被选中时蓝色效果的高度*/
/deep/ .el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}

/*下拉菜单被选中时蓝色效果*/
/deep/ .el-sub-menu__title {
  height: 40px !important;
  line-height: 40px !important;
}

/deep/ .el-menu--inline {
  background-color: #000c17 !important;
}

/*下拉菜单的垂直不对齐问题*/
/deep/ .el-menu--inline .el-menu-item {
  padding-left: 49px !important;
}

/*菜单鼠标滑过效果*/
.el-menu-item:hover, .el-submenu__title:hover {
  color: #fff !important;
}

/*下拉菜单的鼠标滑过效果*/
/deep/ .el-sub-menu__title:hover i {
  color: #fff !important;
}

/deep/ .el-sub-menu__title:hover span {
  color: #fff !important;
}

/*将菜单各项垂直对齐*/
.el-menu-item.is-active i {
  margin-left: -4px;
}

/*头部占满*/
/deep/ .el-header {
  padding: 0;
}

/*面包屑导航垂直居中*/
.el-breadcrumb {
  line-height: 60px;
}

/*头部导航*/
.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  display: flex;
  align-items: center;
  padding: 0 20px;
}

/*侧边栏导航和头部导航改变时加入动画*/
.el-aside {
  transition: all .3s !important;
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

.el-container {
  transition: all .3s !important;
}

.logo-title {
  margin-left: 5px;
  font-size: 20px;
  transition: all .3s; /* 0.3s简写 */
}

/*去掉el-dropdown的黑框*/
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
</style>

<style>
/*设置侧边栏的弹出菜单圆角*/
.el-menu.el-menu--popup.el-menu--popup-right-start {
  border-radius: 10px;
}

.el-menu-item {
  border-radius: 10px;
}

.el-popper.is-light {
  border: none;
}

</style>